<!--缺陷状态组件 -->
<template>
  <div >
		<div>
			<el-input placeholder="关键词" v-model="keyword" style="width: 200px;"></el-input>
			<el-button type="primary" size="mini" @click="loada" >搜素</el-button>
			<el-button type="primary" size="mini" @click="open">添加</el-button>
		</div>
		<el-table :data="datas"style="width: 100%" >
			<el-table-column type="selection"  ></el-table-column>
			<el-table-column prop="stateCode" label="缺陷状态Id"></el-table-column>
			<el-table-column prop="stateDesc" label="缺陷状态名"></el-table-column>
			<el-table-column prop="moduleState" :formatter="state" 
			label="缺陷状态状态" placeholder="0不可用 1 可用"></el-table-column>
			<el-table-column prop="createBy" label="状态创建人"></el-table-column>
			<el-table-column prop="createTime" label="状态创建时间"></el-table-column>
			<el-table-column prop="modifyBy" label="状态修改人"></el-table-column>
			<el-table-column prop="modifyTime" label="修改时间"></el-table-column>
		
			<el-table-column  label="操作">
				<template slot-scope="scope">
					<el-button type="primary" icon="el-icon-edit" size="mini" circle
					  @click="openchange(scope.row)" :disabled="moduleState=0">修改
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		 <!-- 添加缺陷类型的弹出框-->
		 <el-dialog title="添加缺陷状态" :visible.sync="dialogTableVisible " >
		  <el-form  label-width="80px"  >
		    <el-form-item label="状态描述">
		      <el-input v-model="addStateParam.stateDesc"></el-input>
		    </el-form-item>
		
		    <el-form-item label="创建人">
		      <el-input v-model="addStateParam.createBy"></el-input>
		    </el-form-item>
			<el-form-item label="状态的状态">
			  <el-input v-model="addStateParam.moduleState"></el-input>
			</el-form-item>
		    <el-form-item label="创建时间" >
				<el-date-picker  value-format="yyyy-MM-dd HH:mm:ss"type="date"
				 placeholder="选择日期" v-model="addStateParam.createTime">
		   
		 </el-date-picker>
		 </el-form-item>
		</el-form>
		   <div slot="footer" >
		         <el-button @click="dialogTableVisible=false">取 消</el-button>
		         <el-button type="primary" @click="addState">提交</el-button>
		    </div>
		 </el-dialog>
		
		 
		 
		 <!-- 修改的 缺陷状态的弹出框 -->
		
		<el-dialog title="修改状态" :visible.sync="changeTableVisible " >
		  <el-form  label-width="80px"  >
		    <el-form-item label="状态描述">
		      <el-input v-model="changeStateParam.stateDesc"></el-input>
		    </el-form-item>
		
		    <el-form-item label="状态的状态">
		      <el-input v-model="changeStateParam.moduleState">
				  
			  </el-input>
		    </el-form-item>
				 <el-form-item label="创建人">
				   <el-input v-model="changeStateParam.createBy" 
				   :disabled="changeStateParam.createBy !=null"></el-input>
				 </el-form-item>
		    <el-form-item label="创建时间" >
				<el-date-picker  value-format="yyyy-MM-dd HH:mm:ss"type="date"
				 placeholder="选择日期" 
					 :disabled="changeStateParam.createTime!=null"
					  v-model="changeStateParam.createTime">
					</el-date-picker>
					</el-form-item>
					<el-form-item label="修改人">
					  <el-input v-model="changeStateParam.modifyBy"></el-input>
					</el-form-item>
					<el-form-item label="修改时间" >
						<el-date-picker  value-format="yyyy-MM-dd HH:mm:ss"type="date"
						 placeholder="选择日期" v-model="changeStateParam.modifyTime">
						</el-date-picker>
					</el-form-item>
		</el-form>
		   <div slot="footer" >
		         <el-button @click="changeTableVisible=false">取 消</el-button> 
		         <el-button type="primary" @click="changForm">提交</el-button> 
		    </div>
		 </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ststem-defectstate',
  data() {
    		return {
    			datas:[],
    			keyword:null,
    			dialogTableVisible:false,
				changeTableVisible:false,
    			addStateParam:{
					stateDesc:null,
					createBy:null,
					createTime:null,
					moduleState:null
				},
    			changeStateParam:{
					stateCode:null,
					stateDesc:null,
					createBy:null,
					createTime:null,
					moduleState:null,
					modifyBy:null,
					modifyTime:null
    			}
    		}
    	},
    methods:{
		
  	  openchange(row){
  	  		this.changeTableVisible=true;
			this.changeStateParam.stateCode=row.stateCode,
			this.changeStateParam.stateDesc=row.stateDesc,
			this.changeStateParam.createBy=row.createBy,
			this.changeStateParam.createTime=row.createTime,
			this.changeStateParam.moduleState=row.moduleState,
			this.changeStateParam.modifyBy=row.modifyBy,
			this.changeStateParam.modifyTime=row.modifyTime
  	  		  
  	  },
  	  changForm(){	  
	  this.$http.post("/state/save",this.changeStateParam).then(resp =>{
		  if(resp.data.flag==true){
			  this.changeTableVisible=false;
			  this.load();
		  }
	  })
  	  },
	  state(row, column, cell){
		 if(cell==0){
		 	return "不可用";
		 }else if(cell==1){
		 	return "可用";
		 }
	  },

  	  load(){
  	  		  const param= "?keyword="+this.keyword
  	  		  this.$http.get("/state/query"+param).then(resp =>{
  	  			  console.log("vvvvvvvvvvv"+this.keyword)
  	  			  if(resp.data.flag=true){
  	  				  console.log(resp.data.data)
  	  				  this.datas= resp.data.data;
  	  			  }
  	  		  })
  	  },
  	  open(){
  	  		this. dialogTableVisible=true; 
  	  },
  	    addState(){
  	  		  this.$http.post("/state/add",this.addStateParam).then(resp =>{
  	  			  if(resp.data.flag==true){
  	  				this.$message({
  	  				  message: '添加成功',
  	  				  type: 'success'
  	  				});
  	  			  }else{
  	  				  this.$message.error(resp.data.message);
  	  			  }
  	  		  })
  	  		  this.addStateParam={};
  	  		  this. dialogTableVisible=false;
  	  	  }
  	 
    },
    created() {
    	this.load();
    }
    
  }
  </script>
  <style>
  	
  </style>
  
  

